<template>
  <section>
    11
    <div id="dplayer" ref="dplayer" class='d-player'></div>
    22
    <vue-dplayer 
      ref="player"
      :options="options"
      class="d-player"/>
  </section>
</template>

<script>
import DPlayer from "dplayer";
import flvjs from '../assets/flv.min.js'
import VueDplayer from "../components/index"
//

export default {
  name: "DPlayerDemo",
  components:{VueDplayer},
  data() {
    return {
      dp: "",
      options:{
        video:{
          // url:'http://192.168.28.121:3333/video/18812341234,2,1,1',
          url:'http://192.168.1.60:6618/rtmp/ttxplayer/1608858338656/?OTE5QjhCQTUzM0JERkFCQUQzQTI0QTM2QkRFMDlDNUQsMSwwMTg4MTIzNDEyMzQsMSwxLDAsMA==',
          // type:'flv,'
          type: 'customFlv',
          customType: {
            customFlv: function (video, player) {
              const flvPlayer = flvjs.createPlayer({
                cors: true,
                type: 'flv',
                isLive: true,
                hasAudio: false,
                hasVideo: true,
                url: video.src,
                withCredentials: false,
                segments:[{
                  cors: true,
                  timestampBase: 0,
                  withCredentials: false,
                  url: video.src,
                }]
              },{
                enableWorker: false,
                lazyLoadMaxDuration: 3 * 60,
                seekType: 'range',
                enableStashBuffer: false,
                autoFastForward: true,
              });
              flvPlayer.attachMediaElement(video);
              flvPlayer.load();
            }
          }
        },
        live: true,
        autoplay: true,
        screenshot: true,
        // preload: 'none'
      }
    };
  },
  mounted() {
    console.log(this.$refs.dplayer);
    this.dp = new DPlayer({
      container: document.getElementById("dplayer"),
      // container: this.$refs.dplayer,
      // ...this.options
      video: {
        // url:'http://192.168.28.121:3333/video/18812341234,2,1,1',
        url:"http://192.168.1.60:6618/rtmp/ttxplayer/1608858338656/?OTE5QjhCQTUzM0JERkFCQUQzQTI0QTM2QkRFMDlDNUQsMSwwMTg4MTIzNDEyMzQsMSwxLDAsMA==",
        // type:'flv,'
        type: "customFlv",
        customType: {
          customFlv: function (video, player) {
            const flvPlayer = flvjs.createPlayer(
              {
                cors: true,
                type: "flv",
                isLive: true,
                hasAudio: false,
                hasVideo: true,
                url: video.src,
                withCredentials: false,
                segments: [
                  {
                    cors: true,
                    timestampBase: 0,
                    withCredentials: false,
                    url: video.src,
                  },
                ],
              },
              {
                enableWorker: false,
                lazyLoadMaxDuration: 3 * 60,
                seekType: "range",
                enableStashBuffer: false,
                autoFastForward: true,
              }
            );
            flvPlayer.attachMediaElement(video);
            flvPlayer.load();
          },
        },
      },
      live: true,
      autoplay: true,
      screenshot: true,
      // preload: 'none'
    });
  },
};
</script>

<style lang="scss" scoped>
.d-player{
  width: 800px;
  height: 450px;
}
</style>